<template>
  <div>
    <HomeTop></HomeTop>
    <div>
      <div id="maps"></div>
    </div>
    <div class="line-20"></div>
    <HomeFoot></HomeFoot>
  </div>
</template>

<script>
// @ is an alias to /src
import HomeTop from "@/components/HomeTop.vue";
import AMapLoader from "@amap/amap-jsapi-loader";
import HomeFoot from "@/components/HomeFoot.vue";
import api from "@/api/publicApi"
import ok from "@/assets/ok";

export default {
  name: 'AttractionsIndex',
  components: {
    HomeFoot,
    HomeTop,
  },
  data(){
    return{
      merchantList:[],
      positionList:[],
    }
  },
  mounted() {
    this.initMap()
  },
  methods:{

    initMap() {
      AMapLoader.load({
        key: "d244f562a0204c16c559cc1a6b728676", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: '1.4.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        resizeEnable: true, // 定位到当前位置
        plugins: [
          'AMap.ToolBar', //工具条
          'AMap.Scale',
        ], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      }).then((AMap) => {
            this.AMap = AMap;
            this.map = new AMap.Map('maps', {
              center: [114.910963746, 34.723935015],
              viewMode: '3D', //是否为3D地图模式
              zoom: 15, //初始化地图级别 // 3-18
            });
            this.map.addControl(new AMap.Scale()); // 比例尺
            this.map.addControl(new AMap.ToolBar()); // 工具条
            this.getList();
          })
          .catch((e) => {
            console.log(e);
          });
    },

    getList(){
      api.getMerchantList().then(res =>{
        this.merchantList = res.result;
        this.setMarks();
      })
    },

    setMarks() {
      this.merchantList.forEach((item, index) => {
        let marker = new this.AMap.Marker({
          // 经纬度对象，new AMap.LngLat(116.405467, 39.907761)
          // 也可以是经纬度构成的一维数组[116.39, 39.9]
          position: [item.longitude, item.latitude],
          title: item.title,
          extData: { item }, // 写入你的item对象,必须要加{}
          label: item.title,
        });
        this.map.add(marker);
        marker.setLabel({
          offset: new this.AMap.Pixel(1, 0), //设置文本标注偏移量
          content: '<div>' + item.title + '</div>', //设置文本标注内容
          direction: 'top', //设置文本标注方位
        });

        marker.on('click', (e) => {
          let item = e.target.getExtData().item;
          let infoWindow = new this.AMap.InfoWindow({
            content: `<div style="padding:10px;width:400px;line-height:30px;">
            <h2 style="font-size:16px;line-height:30px;">${item.title}</h2>
            <img :src="ok.tool.getImg(${item.headImage})" alt=""/>
            <p style="font-size:15px;">营业时间：${item.businessHours}</p>
            <p style="font-size:15px;">联系人：${item.contacts}<span style="margin-left: 20px">电话:${item.telephone}</span></p>
            <p style="font-size:15px;">地址:${item.address}</p>
            <p style="font-size:15px;">介绍:${item.describeInfo}</p>
            </div>`,
            offset: new this.AMap.Pixel(3, -25),
          })
          infoWindow.open(this.map, [item.longitude, item.latitude]);
          console.log(item);
          console.log(e);
        });
      });
    },
    createDiv(){},

    // init(){
    //   AMapLoader.load({
    //     key: "d244f562a0204c16c559cc1a6b728676",
    //     version: "2.0",
    //   }).then((AMap) => {
    //     // 调用地图渲染函数
    //     this.renderMap(AMap);
    //   }).catch((e) => {
    //     console.error(e); //加载错误提示
    //   });
    // },
    // renderMap(AMap){
    //   const map = new AMap.Map("maps", {
    //     zoom: 12,
    //     center: [114.910963746, 34.723935015],
    //     showIndoorMap: false,
    //   });
    //   // let icon = new AMap.Icon({
    //   //   size: new AMap.Size(12,12),
    //   //   image:'/static/images/icon/location.png',
    //   //   imageSize: new AMap.Size(100, 100),
    //   // });
    //   let Marker = new AMap.Marker({
    //     position: new AMap.LngLat(114.910963746, 34.723935015),
    //     // icon: icon,
    //     offset: new AMap.Pixel(0, 0),
    //   });
    //
    //   map.add(Marker);
    //   Marker.on("click", () => {
    //     let infoWindow = new AMap.InfoWindow({
    //       content: `<div style="padding:10px;width:200px;">
    //         <h2 style="font-size:16px;line-height:30px;">中国建设银行</h2>
    //         <span style="font-size:14px;line-height:20px;">电话:136****5865</span>
    //         <p style="font-size:15px;">地址:河南省新乡市红旗区XXX 中国建设银行</p></div>`,
    //       offset: new AMap.Pixel(3, -25),
    //     });
    //     infoWindow.open(map, [114.91096374603269, 34.723935015203985]);
    //   });
    // }
  }
}
</script>
<style>
#maps {
  width: 100%;
  height: calc(100vh - 200px);
}
</style>
